<template>
  <el-table
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    :data="PermissionArr"
  >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="权限值" prop="code"></el-table-column>
    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
    <el-table-column label="操作">
      <template #="{ row}">
        <el-button
          type="primary"
          size="small"
          @click="addPermission(row)"
          :disabled="row.level == 4 ? true : false"
          >{{ `${row.level == 3 ? "添加功能" : "添加菜单"}` }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="updataPermission(row)"
          :disabled="row.level == 1 ? true : false"
          >编辑</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="deletePermission(row.id)"
          :disabled="row.level == 1 ? true : false"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="showDialog"
    :title="PermissionParams.id?'更新菜单':'添加菜单'"
    width="400"
  >
    <el-form>
      <el-form-item label="名称">
        <el-input
          placeholder="请输入权限名称"
          size="normal"
          clearable
          @change=""
          v-model="PermissionParams.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="权限值">
        <el-input
          placeholder="请输入权限值"
          size="normal"
          clearable
          @change=""
          v-model="PermissionParams.code"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="save"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//引入生命周期函数
import { onMounted, reactive, ref } from "vue";
import { reqAddPermission, reqAllPermission, reqDeletePermission } from "@/api/acl/menu";
import {
  PermisstionResponseData,
  PermissionList,
  AddPermission,
  Permission,
} from "@/api/acl/menu/type";
import { ElMessage } from "element-plus";

//存储数据
let PermissionArr = ref<PermissionList>([]);
//diglog显示控制
let showDialog = ref<boolean>(false);
//
let PermissionParams = reactive<AddPermission>({
  id: "",
  code: "",
  level: "",
  name: "",
  pid: "",
});
//组件挂在完毕
onMounted(() => {
  getHasPermission();
});

//获取菜单数据方法
const getHasPermission = async () => {
  let result: PermisstionResponseData = await reqAllPermission();
  if (result.code == 200) {
    PermissionArr.value = result.data;
  }
};
//添加菜单
const addPermission = (row: Permission) => {
  Object.assign(PermissionParams, {
    id: "",
    code: "",
    level: "",
    name: "",
    pid: "",
  });
  showDialog.value = true;
  PermissionParams.level = row.level + 1;
  PermissionParams.pid = row.id as number;
};
//取消按钮回调
const cancle = () => {
  showDialog.value = false;
};
const save = async () => {
  let result: any = await reqAddPermission(PermissionParams);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: PermissionParams.id?'添加成功':'更新成功',
    });
    getHasPermission();
  } else {
    ElMessage({
      type: "error",
      message: PermissionParams.id?'更新失败':'添加失败',
    });
  }
  showDialog.value = false;
};
//编辑按钮回调
const updataPermission = (row: Permission) => {
  Object.assign(PermissionParams, {
    id: "",
    code: "",
    level: "",
    name: "",
    pid: "",
  });
  Object.assign(PermissionParams,row)
  console.log(PermissionParams)
  showDialog.value = true;
};
//删除菜单
const deletePermission = async(id:number)=>{
   let result = await reqDeletePermission(id)
   if(result.code==200){
    ElMessage({
      type:'success',
      message:'删除菜单成功'
    })
    getHasPermission()
   }else{
    ElMessage({
      type:'error',
      message:'删除菜单失败'
    })
   }
}
</script>

<style scoped></style>
